import * as echarts from "echarts";
import _ from "lodash";

/**
 * 初始化eCharts
 * @param {*} chartConfig 图表初始化参数
 */
class EChart {
  constructor(chartConfig) {
    const { id, fontSize } = chartConfig;
    this.myChart = echarts.init(document.getElementById(id));
    //自适应图表
    window.addEventListener(
      "resize",
      () => {
        this.myChart.resize();
      },
      false,
    );
    // 常规描述框配置
    this.tooltip = {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#015dc4", //设置文字颜色
      },
      backgroundColor: "#fff",
    };
    // 图表位置修改
    this.grid = {
      left: "3%",
      right: "5%",
      bottom: "3%",
      top: "30%",
      containLabel: true,
    };
    // 图表标题配置
    this.title = {
      text: "各单位车辆可用状态",
      textStyle: {
        fontSize: fontSize,
        color: "#fff",
      },
    };
    // X轴配置
    this.xAxis = {
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: 14,
        },
        interval: 0, //设置文本标签全部显示
      }, //刻度文本
      axisLine: {
        show: false, // 不显示坐标轴线
      },
      axisTick: {
        show: false, //  刻度线
      },
    };
    // Y轴配置
    this.yAxis = {
      type: "value",
      name: "单位：辆",
      nameTextStyle: {
        color: "#A5A9BF",
        nameLocation: "start",
        fontSize: fontSize,
      },
      splitLine: {
        show: false,
      }, //去掉Y轴刻度线
      axisLabel: {
        show: true,
        textStyle: {
          color: "#A5A9BF",
          fontSize: fontSize,
        },
      },
    };
    // 数据配置
    this.series = [
      {
        name: "辆",
        type: "bar",
        showBackground: true, //显示背景颜色
        backgroundStyle: {
          color: "#1C275E",
        }, //柱形图背景色
        barWidth: "8", //柱形图宽度
        itemStyle: {
          normal: {
            barBorderRadius: [4, 4, 0, 0], //柱体圆角
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#1B65CD",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#03DFFC",
              },
            ]),
          },
        },
      },
    ];
    // 完整的配置项
    this.chartOption = {};
  }
  // 存储完整的配置数据
  setConfig(config) {
    this.chartOption = { ...this.chartOption, ...config };
  }
  // 初始化eChart
  setOption() {
    //初始化前先清除原本的图表数据
    this.myChart.clear();
    this.myChart.setOption(
      {
        title: this.title,
        tooltip: this.tooltip,
        xAxis: this.xAxis,
        yAxis: this.yAxis,
        series: this.series,
        grid: this.grid,
      },
      false,
    );
  }
}

export { EChart };
